ueTouchLayer
<!--
 * @Autor: 王琛
 * @Description: UE触摸层兼容
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#ueTouchLayer {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
</style>


<template>
  <div id="ueTouchLayer"></div>
</template>


<script setup lang="ts" name="ueTouchLayer">

import {useMainStore} from "src/pinia/index"
import {onMounted} from "vue";

const _state = useMainStore();

onMounted(() => {
  initRocker();
})


/**
 * @description: 初始化摇杆并添加相应的操作事件
 * @author: 王琛
 * @Date: 2023-07-05 15:17:11
 * @param {*}
 * @return {*}
 */
function initRocker() {

  let playerElement = document.getElementById("ueTouchLayer");

  playerElement.onmousedown = function (e) {
    _state.isGlobalPenetrate = "none";
    // type 72
    compatibleWithUEEvents(
        {
          x: e.x,
          y: e.y,
          mouseType: e.button,
          type: 72
        }
    )
    e.preventDefault();

  };
  /**
   * @description: 鼠标抬起事件
   * @author: 王琛
   * @Date: 2023-07-25 17:38:46
   * @param {*}
   * @return {*}
   */
  playerElement.onmouseup = function (e) {
    _state.isGlobalPenetrate = "auto";
    compatibleWithUEEvents(
        {
          x: e.x,
          y: e.y,
          mouseType: e.button,
          type: 73
        }
    )
    // type 73
    e.preventDefault();
    // emitMouseUp(e.button, x, y);
  };
  /**
   * @description: 鼠标抬滚轮事件
   * @author: 王琛
   * @Date: 2023-07-25 17:38:46
   * @param {*}
   * @return {*}
   */
  playerElement.onmousewheel = function (e) {
    // type 75
    compatibleWithUEEvents(
        {
          x: e.x,
          y: e.y,
          wheel: e.wheelDelta,
          type: 75
        }
    )
    e.preventDefault();

  }
  /**
   * @description: 鼠标移动事件
   * @author: 王琛
   * @Date: 2023-07-25 17:39:39
   * @param {*}
   * @return {*}
   */

  playerElement.onmousemove = function (e) {
    compatibleWithUEEvents(
        {
          x: e.x,
          y: e.y,
          mouseType: e.button,
          wheel: 0,
          type: 74
        }
    )
    // emitMouseMove(e.offsetX, e.offsetY, e.movementX, e.movementY);
    e.preventDefault();
  }


  /**
   * @description: 兼容UE事件
   * @author: 王琛
   * @Date: 2023-07-25 14:54:32
   * @param {*}
   * @return {*}
   */
  function compatibleWithUEEvents({x, y, mouseType, wheel, type}) {
    let ueConfig = {
      x: x / playerElement.clientWidth,
      y: y / playerElement.clientHeight,
      mouseType,
      wheel: wheel > 0 ? 1 : wheel < -0 ? -1 : '',
      type
    }
    if (type === 75) console.log('%c日志-151556', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', ueConfig);

    if (!wheel) delete ueConfig.wheel;
    _state.ueSocketOne.toUe({
      FuncName: "MouseButtonDown",
      Args: ueConfig
    })

  }

  window.addEventListener("load", () => {
    window.addEventListener("keyup", function (e) {
      console.log('%c日志-175841', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e);
      keyCommunication({type: "up", keyCode: e.keyCode, repeat: e.repeat})
    })

    window.addEventListener("keydown", function (e) {
      keyCommunication({type: "down", keyCode: e.keyCode, repeat: e.repeat})
    })
  })

  /**
   * @description: UE的按键通讯按钮
   * @author: 王琛
   * @Date: 2023-07-25 17:51:42
   * @param {*}
   * @return {*}
   */
  function keyCommunication({type, keyCode, repeat}) {

    _state.ueSocketOne.toUe({
      FuncName: "KeyDown",
      Args: {
        down: type === "down",
        keyCode,
        repeat
      }
    })
  }

}


</script>
